<template>
  <div>
    <el-table :data="orders"
              stripe
              row-key="id">
      <el-table-column prop="id"
                       label="订单Id"></el-table-column>
      <el-table-column prop="storeName"
                       label="商家名称"></el-table-column>
      <el-table-column prop="masterName"
                       label="负责人姓名"></el-table-column>
      <el-table-column prop="masterPhone"
                       label="负责人电话"></el-table-column>
      <el-table-column prop="status"
                       label="订单状态">
      <template v-slot="scope">
          <el-tag v-if="scope.row.status==0">未支付</el-tag>
          <el-tag type="primary"
                  v-if="scope.row.status==1">已支付</el-tag>
          <el-tag type="info"
                  v-if="scope.row.status==2">已取消</el-tag>
          <el-tag type="success"
                  v-if="scope.row.status==4">已安排</el-tag>
          <el-tag type="danger"
                  v-if="scope.row.status==6">已退款</el-tag>
        </template>
    </el-table-column>
      <el-table-column prop="price"
                       label="订单价格"></el-table-column>
      <el-table-column prop="carCount"
                       label="检测车辆数"></el-table-column>
      <el-table-column prop="createDate"
                       label="下单时间"></el-table-column>
      <el-table-column prop="serveName"
                       label="商务负责人"></el-table-column>
      <el-table-column prop
                       label="操作">
        <template v-slot="scope">
          <el-button size="mini"
                     type="primary"
                     @click="getDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--------详情弹窗-------->
    <el-dialog title="订单详情"
               :visible.sync="centerDialogVisible"
               width="40%"
               center>
      <el-descriptions :border="true">
        <el-descriptions-item label="订单id">{{newObj.id}}</el-descriptions-item>
        <el-descriptions-item label="负责人姓名">{{newObj.masterName}}</el-descriptions-item>
        <el-descriptions-item label="负责人电话">{{newObj.masterPhone}}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag v-if="newObj.status==0">未支付</el-tag>
          <el-tag type="primary"
                  v-if="newObj.status==1">已支付</el-tag>
          <el-tag type="success"
                  v-if="newObj.status==4">已安排</el-tag>
          <el-tag type="danger"
                  v-if="newObj.status==6">已退款</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="订单价格">{{newObj.price}}</el-descriptions-item>
        <el-descriptions-item label="检测车辆数">{{newObj.carCount}}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{newObj.createDate}}</el-descriptions-item>
        <el-descriptions-item label="车辆详情">
          <div v-for="(car,index) in newObj.cars"
               :key="index">
            {{car.carNumber}}
            <el-image v-for="(item,index) in car.licenseImg"
                      :key="index"
                      :src="item"
                      style="width:100px;"
                      fit="scale-down"
                      lazy
                      :preview-src-list="car.licenseImg"></el-image>
            <el-image v-for="(item,index) in car.policyImg"
                      :key="index"
                      :src="item"
                      style="width:100px;"
                      fit="scale-down"
                      lazy
                      :preview-src-list="car.policyImg"></el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-button size="mini"
                 type="danger"
                 v-if="newObj.status>0&&newObj.status<6"
                 @click="refund(newObj)">退款</el-button>
    </el-dialog>

    <el-pagination background
                   layout="prev,pager, next, jumper"
                   :total="total"
                   @current-change="handleCurrentPage"
                   @size-change="handleSizeChange"
                   :current-page="currentPage"
                   :page-size="10"></el-pagination>
  </div>
</template>
<script>
import pickArea from '@/components/pickArea.vue'
export default {
  inject: ['reload'],
   components: {
    pickArea,
  },
  data: function () {
    let currentUser = this.$store.state.LoginModule.currentUser
    return {
      currentUser,
      orders: [],
      total: 0,
      centerDialogVisible: false,
      newObj: {},
      currentPage: 1,
      orderQuery: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  async created() {
    this.handleCurrentChange(1)
  },
  methods: {
    handleCurrentChange: async function (val) {
        const { data } = await this.$http.get(
          `/order/getOrder?pageNum=${val}&pageSize=10`
        )
        if (data.code == 1) {
          this.orders = data.object.list
          this.total = data.object.total
          this.currentPage = data.object.pageNum;
        } else {
          this.$message({
            message: data.message,
            type: 'error',
          })
      }
    },
    getDetail: async function (obj) {
      this.newObj = obj
      const { data } = await this.$http.get(
        `/order/getCarsByOrderId?merchantOrderId=${obj.id}`
      )
      this.newObj.cars = data.object
      this.centerDialogVisible = true
    },
    refund: async function (obj) {
      // 过滤空元素
      let carIds = obj.orderIds.split(',').filter((item) => {
        if (item) {
          return item
        }
      })
      this.$confirm('此操作将退还费用给客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const { data } = await this.$http.post(`/order/verifyRefund`, {
            verifyResult: 1,
            carIds,
            merchantOrderId: obj.id,
            quote: obj.price,
            reason: '协商一致,后台退款',
            applyUserName: this.currentUser.username,
            applyUserPhone: this.currentUser.phone,
          })
          if (data.code == 1) {
            this.$message.success('退款成功')
            this.reload()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退款',
          })
        })
    },
    handleCurrentPage(val) {
      this.currentPage = val;
      this.handleCurrentChange(val);
    },
    handleSizeChange(val) {
      this.orderQuery.pageNum = val;
      this.orderQuery.pageSize = val;
      this.handleCurrentChange(1);
    },
  },
}
</script>
<style scoped>
.el-form-item.show-pic .el-image {
  margin: 0 10px;
}
</style>